<template>
  <view class="order-container">
    <!-- 如果有头部组件，可以在这里添加 -->

    <van-tabs @change="onTabChange" :active="activeTab">
      <van-tab title="进行中">
        <Orderitem :orderlist="orders.ongoing"></Orderitem>
      </van-tab>

      <van-tab title="已完成">
        <Orderitem :orderlist="orders.completed"></Orderitem>
      </van-tab>

      <van-tab title="问题订单">
        <Orderitem :orderlist="orders.problem"></Orderitem>
      </van-tab>
    </van-tabs>
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
  </view>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import Orderitem from '@/components/user/orderlist/orderitem';
import { getOrderList } from '../../../../requests/user/order';


export default {
  name: "orderlist",
  // 注册组件
  components: {
    Orderitem
  },
  data() {
    // 这里存放数据
    return {
      activeTab: 0, // 当前选中的标签索引（0: 进行中, 1: 已完成, 2: 问题订单）
      loading: false,      // 是否正在加载
      finished: [false, false, false], // 每个分类是否加载完毕
      page: [1, 1, 1],     // 每个分类的当前页码
      pageSize: 10,         // 每页数量
      loading: false,
      orders: {
        ongoing: [],// 进行中的订单
        completed: [],// 已完成的订单
        problem: []// 问题订单
      },
    }
  },
  // 方法集合
  methods: {
    fetchOrders(tabIndex) {
      if (this.loading || this.finished[tabIndex]) return;


      this.loading = true;
      getOrderList(tabIndex + 1).then(res => {

        switch (tabIndex) {
          case 0:
            this.orders.ongoing = res.data;
            break;
          case 1:
            this.orders.completed = res.data;
            break;
          case 2:
            this.orders.problem = res.data;
            break;
        }

        this.loading = false;
      });

      
    },


    /**
     * 监听标签切换
     */
    onTabChange: function (e) {
      const tabIndex = e.mp.detail.index;
      // 当切换标签时，可以重置页码并重新加载数据
      this.page[tabIndex] = 1
      this.finished[tabIndex] = false
      this.orders[tabIndex] = []

      this.fetchOrders(tabIndex);
    },

    /**
     * 监听页面滚动到底部（可选，如果需要每个标签下都支持加载更多）
     */
    onReachBottom: function () {
      const activeIndex = this.data.activeTab;
      this.fetchOrders(activeIndex);
    }

  },

  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  onLoad() {
    this.fetchOrders(0);
  }
}
</script>

<style>
@import "index.css";
</style>
